<template>
	<view :class="['page',{'iphoneX':isIphoneX}]">
		<template v-if="isLogin">
			<view class="body">
				<view class="form-wrap m-b2">
					<view class="form-item">
						<view class="label">药剂名称：</view>
						<view class="form-input">
							<view class="content">
								<input type="text" class="inp" v-model="params_1.potion_name" placeholder="输入药剂名称" />
							</view>
						</view>
					</view>
			
					<view class="form-item">
						<view class="label">品 牌：</view>
						<view class="form-input">
							<view class="content">
								<input type="text" class="inp" v-model="params_1.potion_brand" placeholder="输入药剂品牌" />
							</view>
						</view>
					</view>
					
					<view class="form-item">
						<view class="label">选择剂型：</view>
						<picker class="form-picker" mode="selector" :range="allSpecs.potionTypes" range-key="type_name" @change="changePotionTypes($event,2)">
							<view class="picker">
								<input type="text" class="select-data t-l" v-model="params_1.potionType.type_name" placeholder="选择药剂剂型"
									disabled>
								<view class="icon">
									<view class="iconfont f-s68">&#xeb8a;</view>
								</view>
							</view>
						</picker>
					</view> 
					
					<view class="form-item">
						<view class="label">防控对象：</view>
						<view class="form-input">
							<view class="content">
								<input type="text" class="inp" v-model="params_1.fk_pest" placeholder="输入防控对象" />
							</view>
						</view>
					</view>
					
					<view class="form-item">
						<view class="label">农药登记证：</view>
						<view class="form-input">
							<view class="content">
								<input type="text" class="inp" v-model="params_1.registration_No" placeholder="输入农药登记证" />
							</view>
						</view>
					</view>
			
					<view class="form-item">
						<view class="label">生产许可证：</view>
						<view class="form-input">
							<view class="content">
								<input type="text" class="inp" v-model="params_1.license_No" placeholder="输入生产许可证" />
							</view>
						</view>
					</view>
			
					<view class="form-item">
						<view class="label">农药标准号：</view>
						<view class="form-input">
							<view class="content">
								<input type="text" class="inp" v-model="params_1.standard_No" placeholder="输入农药标准号" />
							</view>
						</view>
					</view>
					
					<view class="form-item">
						<view class="label">可选规格：</view>
						<view class="form-input">
							<view class="content" @click="showPopup('show','isShowSpec')">
								<input type="text" class="inp" v-model="params_1.spec.value" disabled placeholder="选择药剂规格" />
								<view class="icon">
									<view class="iconfont f-s68">&#xeb8a;</view>
								</view>
							</view>
						</view>
					</view> 
			
					<view class="form-textarea-item">
						<view class="label a-t">药剂说明</view>
						<view class="form-textarea">
							<textarea class="inp-textarea" v-model="params_1.potion_content" placeholder="输入药剂说明" maxlength="-1"></textarea>
						</view>
					</view>
			
				</view>
			
				<!-- 图片上传 -->
				<view class="form-wrap m-b2">
					<view class="upload-pic-item">
						<view class="label">包装照片</view>
						<view class="form-upload-pic">
							<template>
								<view class="img-item" v-for="(item,index) in params_1.files" :key="index">
									<image src="@/static/images/filter_bg.png" mode="widthFix">
										<!-- 占位 -->
									</image>
									<view class="img-wrap" @click="previewPic(index)">
										<image class="img" :src="item.url" mode="widthFix"></image>
									</view>
									<view v-if="item.status==1" class="del-icon" @click="delPic(index)">
										<view class="iconfont">&#xe74b;</view>
									</view>
									<view v-if="item.status==0" class="loading-img">
										<div class="loading-icon loader-18"></div>
									</view>   
								</view>
							</template>
							<view class="img-item add-btn" @click="uploadImage">
								<image src="@/static/images/upload_pic.png" mode="widthFix"></image>
							</view>
						</view> 
					</view>
				</view>
			
			</view>
			
			<!-- 底部 -->
			<view class="footer">
				<view class="fix-wrap bottom">
					<view class="btn" @click="addYaoJi">确定添加</view>
				</view>
			</view>
			
			<!-- 药品规格 -->
			<view v-if="flag.isFullPage" class="full-fix-page">
				<template v-if="flag.isShowSpec"> 
					<view class="fix-bottom-wrap a-fadeinB">
						<view class="close-btn iconfont f-s38" @click="showPopup('hide')">&#xe624;</view>
						<view class="hd">
							<view class="t-m">选择药品规格</view>
						</view>
						<view class="popup-body">
							<view class="scroll-view">
								<view class="detail-wrap">
									<label class="check-item" v-for="(item,index) in specs" :key="index" @click="select_spec(item.id)">
										<view class="text">{{item.value}}</view> 
										<view class="radio">
											<view v-if="!item.check" class="iconfont f-s50 f-grey">&#xe6a6;</view>
											<view v-else class="iconfont f-s50">&#xe604;</view>
										</view>
										<!-- <radio class="radio" value="" :checked="item.check" color="#f00" /> -->
									</label>										 
								</view>
							</view>
							<view class="bottom">
								<view class="fix-wrap btn-wrap">
									<navigator open-type="navigate" url="/package_yuncaiji/specsList/specsList" hover-class="none" class="item-horizontal flex-grow-1 blue">
										<view class="name">管理规格</view>
									</navigator> 
									<view class="item-horizontal flex-grow-1 red" @click="confirm_spec">
										<view class="name">确定</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</template>					
			</view>
						 
		</template>
	</view>
</template>

<script>
	import {
		dateFormat,
		uploadImage,
		previewImage,
		uploadToServe
	} from '@/common/util.js'
	export default {
		name: 'name',
		data() {
			return {
				page: '2', //  1 添加药剂   3 药剂分配  4 添加分配单位   
				isLogin: true,
				isIphoneX: getApp().globalData.isIphoneX,
				userInfo:uni.getStorageSync('userInfo'),
				isShowPrevData: false,
				isStop: true,
				allSpecs:{},
				specs:[], 
				potionTypes:[],
				params_1: {
					potion_name:'',
					potion_brand:'',
					potionType:{
						id:'',
						type_name:''
					},
					fk_pest:'',
					registration_No:'',
					license_No:'',
					standard_No:'',
					spec:{
						id:'',
						value:''
					},
					potion_content:'',
					files:[]
				},
				flag:{
					isFullPage:false,
					isShowSpec:false
				}
			}


		},
		async onLoad(params) {  
			this.isLogin = await this.$loginState('check');		
			if(this.isLogin){
				this.getSpecs();
				this.getPotionSpecs();
			} 
		},
		async onShow() {

		},
		methods: {
			
			// 获取药剂规格
			getSpecs:async function(){
				let res=await this.$api.ycj_api.getAllSpecs();  
				console.log(res)
				if(res.data.ret==0){
					res.data.data.forEach(item=>{
						let spec={}
						spec.id=item.id;
						spec.check=false;
						spec.value=item.unit_count+item.alias_name+'/'+item.pack_name;
						this.specs.push(spec)
					})	 				 
				}
			},
			
			// 获取药剂规格参数
			getPotionSpecs:async function(){
				let res=await this.$api.ycj_api.getPotionSpecs();   
				if(res.data.ret==0){ 
					this.allSpecs=res.data.data;
				}
			},
			
			
			/***************添加药剂*******************/			
	 		
			
			// 选择规格
			select_spec:function(id){
				this.specs.forEach(item=>{ 
					item.check=false;
					if(item.id==id){
						item.check=true;
					}					 
				})	
			},
			
			// 确定规格
			confirm_spec:function(){
				this.specs.forEach(item=>{ 
					if(item.check){ 
						this.params_1.spec['id']=item.id;
						this.params_1.spec['value']=item.value;
					}					 
				})
				this.showPopup('hide');				
			},
			 
			
			// 选择剂型
			changePotionTypes:function(e){ 
				let idx=e.detail.value;
				this.params_1.potionType.type_name=this.allSpecs.potionTypes[idx].type_name;
				this.params_1.potionType.type_id=this.allSpecs.potionTypes[idx].id;
			},
			
			// 上传图片
			uploadImage: function() {
				// 上传现场照片
				let _this = this;
				uploadImage({
					length: _this.params_1.files.length,
					maxSize: 1,
					success(res) {
						let params_data = {};
						params_data.status = 0;
						params_data.url = res.tempFilePaths[0];
						_this.params_1.files = _this.params_1.files.concat(params_data); 
						uploadToServe({
							url: '/project/upload-file',
							filePath: res.tempFilePaths[0],
							name: 'photo',
							formData: {
								'p_id': 0,
								'create_uid': _this.userInfo.id
							}
						}).then((up_res) => {
							if (up_res.ret == 0) {								
								params_data.file_name = up_res.data.file_name;
								params_data.file_path = up_res.data.file_path;
								params_data.file_type = up_res.data.file_type;
								params_data.status=up_res.data.status;
								params_data.type = up_res.data.type;								
							}
						})
					}
				})
			},
			
			// 预览图片
			previewPic: function(index) {
				let _this = this;
				let preview_data = [];
				this.params_1.files.forEach(item => {
					preview_data.push(item.url);
				})
				previewImage({
					data: preview_data,
					index: index
				})
			},
			
			// 删除图片
			delPic: async function(index) {
				let res=await this.$api.ycj_api.deletefile({
					file_path:this.params_1.files[index].file_path
				}) 
				if(res.data.ret==0){
					this.params_1.files.splice(index, 1);
				} 
			}, 
			 
			
			// 添加药剂
			addYaoJi:async function(){
				let _this=this;
				if(this.params_1.potion_name==''){
					uni.showToast({
						icon: 'none',
						title: '请输入药剂名称',
						mask: true,
						duration: 1000
					})
					return
				}
				if(this.params_1.potion_brand==''){
					uni.showToast({
						icon: 'none',
						title: '请输入药剂品牌',
						mask: true,
						duration: 1000
					})
					return
				}
				if(this.params_1.potionType.type_name==''){
					uni.showToast({
						icon: 'none',
						title: '请选择药剂剂型',
						mask: true,
						duration: 1000
					})
					return
				}
				if(this.params_1.fk_pest==''){
					uni.showToast({
						icon: 'none',
						title: '请输入防控对象',
						mask: true,
						duration: 1000
					})
					return
				}
				if(this.params_1.registration_No==''){
					uni.showToast({
						icon: 'none',
						title: '请输入农药登记证',
						mask: true,
						duration: 1000
					})
					return
				}
				if(this.params_1.license_No==''){
					uni.showToast({
						icon: 'none',
						title: '请输入生成许可证',
						mask: true,
						duration: 1000
					})
					return
				}
				if(this.params_1.standard_No==''){
					uni.showToast({
						icon: 'none',
						title: '请输入农药标准号',
						mask: true,
						duration: 1000
					})
					return
				}
				if(this.params_1.spec.value==''){
					uni.showToast({
						icon: 'none',
						title: '请选择药剂规格',
						mask: true,
						duration: 1000
					})
					return
				} 
				if(this.params_1.files.length==0){
					uni.showToast({
						icon: 'none',
						title: '请上传药剂图片',
						mask: true,
						duration: 1000
					})
					return
				}
				
				let img_status = this.params_1.files.some(item => {
					if (item.status == 0) {
						return true
					}
				})
				
				if (img_status) {
					uni.showToast({
						icon: 'none',
						title: '图片未上传完',
						mask: true,
						duration: 1000
					})
					return
				}
				
				uni.showLoading({
					title:"数据提交中..."
				})
				
				if(this.isStop){
					this.isStop=false;
					let res=await this.$api.ycj_api.addPotion({
						potion_name: this.params_1.potion_name,
						potion_brand: this.params_1.potion_brand,
						type_name: this.params_1.potionType.type_name,
						type_id: this.params_1.potionType.type_id,
						fk_pest: this.params_1.fk_pest,
						registration_No: this.params_1.registration_No,
						license_No: this.params_1.license_No,
						standard_No: this.params_1.standard_No,
						files: JSON.stringify(this.params_1.files),
						specs_id: this.params_1.spec.id,
						potion_content:this.params_1.potion_content
					}) 
					if(res.data.ret==0){
						uni.hideLoading();
						this.$store.commit('UPDATE_YAOJI_LIST',1);   // 药剂列表更新
						uni.showToast({
							icon: 'success',
							title: '上传成功',
							mask: true,
							duration: 2000,
							success() {
								setTimeout(()=>{
									_this.isStop=true;
									uni.navigateBack({
										delta:1
									})
								},2000)
							}
						})
					}else{
						uni.hideLoading();
						uni.showToast({
							icon: 'none',
							image:'../../static/image/error.png',
							title: '上传失败',
							mask: true,
							duration: 2000,
							success() {
								setTimeout(()=>{
									_this.isStop=true; 
								},2000)
							}
						})
					}
				}
				 
				
			}, 
			
			// 打开弹窗
			showPopup:function(t,n){
				if(t=='show'){
					this.flag.isFullPage=true;
					this.flag[n]=true;
				}else if(t=='hide'){
					for(let i in this.flag){
						this.flag[i]=false;
					}
				}
			},
 
		},
		components: {},

		computed: {
			specs_update(){ 
				return this.$store.state.yjSpecsUpdate;
			}
		},
		watch: {
			specs_update(newer,older){
				if(newer!=older){
					this.specs=[];
					this.getSpecs();
				}
			}
		}

	}
</script>

<style lang="less">
	.form-wrap .label {
		width: 35%;
	}

	.form-wrap .content .link {
		color: #000;
	}

	.status {
		padding: 0 20rpx;
		color: #f00;
		font-size: 28rpx;
	}

	.btn {
		@h: 80rpx;
		width: 98%;
		margin: 10rpx auto;
		text-align: center;
		height: @h;
		line-height: @h;
		background: linear-gradient(#e96b5c, #ce3c2f);
		border-radius: 10rpx;
		color: #fff;
		font-size: 34rpx;
	}

	 
</style>
